<template>
	<view>
		<view class="page-foot bg-white ">
			<view class="input-foot-box m-hairline--top flex-box">
				<view class="input-box flex-box flex-1 plr25">
					<image class="icon1 mr15" src="/static/icon/icon_edit1.png" mode="aspectFit"></image>
					<input :focus="isFocus" v-model="commentContent" confirm-type="send" @confirm="postForumComment()" @blur="inputBlur" class="m-input flex-1 col-3" type="text" placeholder="说你想说的..." />
				</view>

				<button class="m-button flex-box flex-center" open-type="share">
					<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
					<view class="fs26 col-3">分享</view>
				</button>

				<view class="ptb10 flex-box" @click="inputFocus">
					<image class="icon2 mr10 ml30" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
					<view class="fs26 col-3">{{ forumData.comment_count }}</view>
				</view>

				<button class="m-button flex-box flex-center ptb5" @click="toggleFav(forumData.id)">
					<image v-if="forumData.is_fav_count == 0" class="icon mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
					<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
					<view class="fs26 col-3">{{ forumData.fav_count }}</view>
				</button>
			</view>
		</view>
		<view class="container">
			<view class="post-box bg-white">
				<view class="post-item ptb40 plr30">
					<view class="flex-box mb40 flex-align-start">
						<image class="img-head mr20 mt5" :src="forumData.user == null ? '' : forumData.user.avatar " mode="aspectFill"></image>
						<view class="flex-1">
							<view class="mb15 fs30 col-3 fwb">{{ forumData.user == null ? '' : forumData.user.nickname}}</view>
							<view class="fs24 col-9">{{ $formatDatetime(forumData.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
						</view>
						<view v-if="forumData.is_focus_count == 0" class="btn1" @click="toggleFocusUser(forumData.user_id)">关注</view>
						<view v-else class="btn2" @click="toggleFocusUser(forumData.user_id)">已关注</view>
					</view>
					<view class="text mb20">{{ forumData.content }}</view>
					<block v-if="forumData.images.length > 0 && forumData.images[0].length > 0">
						<view class="img-box flex flex-align-start flex-wrap">
							<image
								v-for="img in forumData.images"
								@click="previewImage"
								:src="img"
								:class="{ img1: forumData.images.length == 1, img2: forumData.images.length == 2, img3: forumData.images.length >= 3 }"
								mode="aspectFill"
							></image>
						</view>
					</block>
					<view class="topic mt20">{{ forumData.topic.name }}</view>
					<!-- <view class="flex-box flex-end">
						<button class="m-button flex-box flex-center" open-type="share">
							<image class="icon mr10" src="/static/icon/icon_share5.png" mode="aspectFit"></image>
							<view class="fs26 col-3">分享</view>
						</button>
						<button class="m-button flex-box flex-center">
							<image class="icon mr10" src="/static/icon/icon_comment1.png" mode="aspectFit"></image>
							<view class="fs26 col-3">{{ forumData.comment_count }}</view>
						</button>
						<button class="m-button flex-box flex-center" @click="toggleFav(forumData.id)">
							<image v-if="forumData.is_fav_count == 0" class="icon mr10" src="/static/icon/icon_thumbs_normal.png" mode="aspectFit"></image>
							<image v-else class="icon mr10" src="/static/icon/icon_thumbs_selected.png" mode="aspectFit"></image>
							<view class="fs26 col-3">{{ forumData.fav_count }}</view>
						</button>
					</view> -->
				</view>
			</view>
			<!-- 评论 -->
			<view class="comment-box p30">
				<view class="flex-box mb35">
					<view class="fs28 col-3 mr5">评论</view>
					<view class="fs28 col-3 fwb flex-1">{{ forumData.comment_count }}</view>
					<view class="fs24 col-3">点赞{{ forumData.fav_count }}</view>
					<!-- <view class="mlr15 fs20 col-gray">|</view> -->
					<!-- <view class="fs24 col-3">转发123</view> -->
				</view>
				<!-- 评论 -->
				<view class="comment-item flex flex-align-start ptb25" v-for="(item, index) in commentList" :key="item.id">
					<image class="img-head mr20" :src="item.user == null ? '' : item.user.avatar" mode="aspectFill"></image>
					<view class="flex-1 mt10">
						<view class="flex-box mb20">
							<view class="fs28 col-3 flex-1">{{ item.user == null ? '' : item.user.nickname }}</view>
							<view class="fs24 col-9">{{ $formatDatetime(item.updatetime, 'yyyy-mm-dd hh:ii:ss') }}</view>
						</view>
						<view class="text">{{ item.content }}</view>
						<!-- 回复 -->
						<!-- <view class="reply-item flex flex-align-start pt30">
							<image class="img-head mr20" src="/static/icon/img_service.png" mode="aspectFill"></image>
							<view class="flex-1 mt10">
								<view class="flex-box mb20">
									<view class="fs28 col-3 flex-1">喜乐长安</view>
									<view class="fs24 col-9">12月4日 18:24</view>
								</view>
								<view class="text">这是内容这是内容这是内</view>
							</view>
						</view> -->
					</view>
				</view>
				<view class="g-btn3-wrap">
					<view class="g-btn3" :class="{ nomore: commentListMore.nomore == true || commentListMore.loading == true}" @click="getForumComment(forum_id)">{{ commentListMore.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			forum_id: null,
			commentContent: '',
			forumData: {user:{avatar:'',nickname:''},topic:{name:''},images:[]},
			commentList: [],
			commentListMore: { page: 1 },
			isFocus:false
		};
	},
	onLoad(e) {
		this.forum_id = e.id;
		this.getForum(e.id);
		this.getForumComment(e.id);
	},
	methods: {
		getForum(id) {
			this.$core.get({
				url: 'xiluedu.forum/detail',
				data: { forum_id: id },
				success: ret => {
					if (ret.code == 1) {
						this.forumData = ret.data;
						ret.data.images = ret.data.images.split(',');
					}
				}
			});
		},
		getForumComment(id) {
			util.fetch(this, 'xiluedu.forum_comment/lists', { pagesize: 10, forum_id: id }, 'commentListMore', 'commentList', 'data', data => {});
		},
		postForumComment() {
			let forum_id = this.forum_id;
			let content = this.commentContent;
			this.$core.post({
				url: 'xiluedu.forum_comment/add_comment',
				data: { forum_id, content },
				success: ret => {
					this.commentContent = '';
					this.commentList = [];
					this.commentListMore = { page: 1 };
					this.getForumComment(this.forum_id);
					uni.$emit('discoverRefresh')
					uni.$emit('topicDetailRefresh')
				},
				fail: err => {}
			});
		},
		// 关注取关
		toggleFocusUser(user_id) {
			this.$core.post({
				url: 'xiluedu.forum/toggle_focus',
				data: { user_id: user_id },
				success: ret => {
					this.forumData.is_focus_count = ret.data.is_focus_count;
					uni.$emit('discoverRefresh')
					uni.$emit('topicDetailRefresh')
				},
				fail: err => {}
			});
		},
		// 点赞
		toggleFav(forum_id) {
			this.$core.post({
				url: 'xiluedu.forum/toggle_fav',
				data: { forum_id: forum_id },
				success: ret => {
					this.getForum(this.forum_id);
					uni.$emit('discoverRefresh')
					uni.$emit('topicDetailRefresh')
				},
				fail: err => {}
			});
		},
		previewImage() {
			uni.previewImage({
				urls: this.forumData.images
			});
		},
		inputFocus(){
			this.isFocus = true
		},
		inputBlur(){
			this.isFocus = false
		}
	}
};
</script>

<style scoped>
.post-box {
	border-bottom: 20rpx solid #f7f7f7;
}
.post-box .post-item {
	border-bottom: 1rpx solid #f7f7f7;
}
.post-box .img-head {
	display: block;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.post-box .btn1 {
	width: 80rpx;
	height: 36rpx;
	border: 1rpx solid #ececec;
	border-radius: 4rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	line-height: 32rpx;
	text-align: center;
}
.post-box .btn2 {
	font-size: 24rpx;
	font-weight: 500;
	color: #999999;
}
.post-box .text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 46rpx;
}
.post-box image {
	display: block;
}
.post-box .img1 {
	margin: 0 0 20rpx;
	width: 418rpx;
	height: 428rpx;
}
.post-box .img2 {
	margin: 0 12rpx 12rpx 0;
	width: 304rpx;
	height: 278rpx;
}
.post-box .img2:nth-of-type(2n) {
	margin: 0 0 12rpx;
}
.post-box .img3 {
	margin: 0 12rpx 12rpx 0;
	width: 200rpx;
	height: 200rpx;
}
.post-box .img3:nth-of-type(3n) {
	margin: 0 0 12rpx;
}
.post-box .topic {
	font-size: 26rpx;
	font-weight: 500;
	color: #5964b8;
}
/* .post-box .topic::before {
	content: '#';
}
.post-box .topic::after {
	content: '#';
} */
.post-box .icon {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.post-box .m-button {
	margin-left: 60rpx;
	line-height: 30rpx;
}
/*  */
.comment-box .img-head {
	display: block;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
}
.comment-box .text {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 48rpx;
}
/*  */
.page-foot .input-foot-box {
	padding: 25rpx 30rpx;
}
.page-foot .input-box {
	height: 76rpx;
	background: #f7f7f7;
	border-radius: 38rpx;
}

.page-foot .icon {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.page-foot .icon1 {
	display: block;
	width: 40rpx;
	height: 40rpx;
}
.page-foot .icon2 {
	display: block;
	width: 28rpx;
	height: 28rpx;
}
.page-foot .m-input {
	font-size: 26rpx;
	font-weight: 500;
	line-height: 40rpx;
}
.page-foot .m-button {
	line-height: 30rpx;
	padding: 10rpx 0;
	margin: 0 0 0 30rpx;
	text-align: center;
	background-color: transparent;
	border: none;
	width: auto;
}
.page-foot .m-button::after {
	display: none;
}
</style>
